<template>
  <div class="dataManage">
    <nav-bar class="home-nav">
      <div slot="center">温控</div>
    </nav-bar>
      <div class="monitor-top">
        <div class="monitor-top-first">
          <div class="monitor-top-b">
            <div>设备数据</div>
          </div>
          <div class="monitor-top-c"></div>
          <div class="monitor-top-d">
            <div class="monitor-top-d-a">
              <div class="equip">总设备</div>
              <div class="equip-num">
                <div class="equip-num-one">
                  <div class="equip-num-one-o">{{equip_num}}</div>
                  <div class="equip-num-one-t">台</div>
                </div>
              </div>
            </div>
            <div class="monitor-top-d-b">
              <div @click="toEquip()">查看设备</div>
            </div>
          </div>
        </div>
        <div class="monitor-top-two">
          <div class="monitor-top-two-ft">
            <div class="monitor-top-two-a" @click="toAbnormalEquip()">
              <div class="a-first img-one"><img src="@/assets/images/equips.png"></div>
              <div class="first-b img-cont-one">
                <div class="first">{{abnomal_equip}}台</div>
                <div class="two">异常设备</div>
              </div>
            </div>
            <div class="monitor-top-two-a" @click="toTempEquip(1)">
              <div class="a-first img-two"><img src="@/assets/images/temps.png"></div>
              <div class="first-b img-cont-two">
                <div class="first">{{abnomal_temp}}台</div>
                <div class="two">温度异常</div>
              </div>
            </div>
            <div class="monitor-top-two-a" @click="toTempEquip(2)">
              <div class="a-first img-ft"><img src="@/assets/images/hum.png"></div>
              <div class="first-b img-cont-ft">
                <div class="first">{{abnomal_hum}}台</div>
                <div class="two">湿度异常</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <history-view :history="equip_log" :isEmpty="isEmpty">
        <span>最新异常数据</span>
      </history-view>
    <tab-bar :active=2></tab-bar>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import tabBar from '@/components/content/tabBar';
  import noData from "@/components/content/nodata";
  import historyView from "./childComps/historyView";
  export default {
    name: "index",
    components: {
      tabBar,
      NavBar,
      noData,
      historyView
    },
    data() {
      return {
        abnomal_equip:0,
        abnomal_hum:0,
        abnomal_temp:0,
        equip_log:[],
        equip_num:0,
        isEmpty:false
      }
    },

    created() {
        this.getMonitorIndex();
    },

    methods: {
      getMonitorIndex() {
        let that = this;
        that.$http.get('/api/monitorApi/index', {}, r => {
          that.abnomal_equip=r.data.abnomal_equip;
          that.abnomal_hum=r.data.abnomal_hum;
          that.abnomal_temp=r.data.abnomal_temp;
          that.equip_log=r.data.equip_log;
          that.equip_num=r.data.equip_num;
          if (that.equip_log.length==0)
          {
            that.isEmpty=true;
          }else{
            that.isEmpty=false;
          }
        })
      },
      toEquip:function (e) {
        this.$router.push({path:'/equipment', query:{}})
      },
      toAbnormalEquip:function (e) {
        this.$router.push({path:'/abnormal', query:{}})
      },
      toTempEquip:function (e) {
        this.$router.push({path:'/tempary', query:{type:e}})
      }
    }
  }
</script>

<style scoped>
  .search_input >>> .van-cell, .search_select >>> .van-cell {
    font-size: .3rem;
    padding: .1rem;
  }

</style>
